<!-- 普通消息摘要 -->
<!-- 小旗子 2020/8/21日更新-->
<!-- 8.22
		1.解决正文和用户名字体大小问题
		2.修改了顶部和底部样式bug
		3.修改底部图标大小
		4.删除循环-->
<!-- 8.24
		1.下方空白减少，取消字体加粗
		2.at和tag添加点击事件-->
<!-- 8.25
			1.点赞 收藏 投币 请求完成-->
<!-- 8.30
			1.按后台数据改写逻辑
			2.接收外部页面传参-->
<!-- 8.31
			1.修改样式
			2.添加时间显示
			3.添加图片预览
			4.添加图片显示判断-->
<!-- 9.1
			1.能重新获取到帖子数据
			2.微调等级图标样式-->
<!-- 9.6
			1.修改弹窗内容，请求之后再将点赞收藏投币数字++
			2.修改图片传参及样式-->
<!-- 9.7 	
			小瓜子
			1.修复组件能左右滑动的bug-->
<!-- 9.7    小旗子
			1.修改评论按钮跳转,唤起评论功能
			2.缩小内容和头像间距 -->
<!-- 9.7    小瓜子
			1.修改一分钟内时间不显示bug -->

<!-- 9.7    小瓜子
			1.完成删除帖子接口 -->
<template>
	<!-- 普通消息框 -->

	<view class="normal-message">

		<!-- 用户信息、举报按钮显示 -->
		<navigator class="userBar" hover-class="none" :url="userId == datas.authorId ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' + normalList.authorId">
			<image :src="datas.authorAvatar" mode="aspectFill" class="user_head" />
			<view class="level"><Level :level="datas.authorLevel"></Level></view>
			<view class="user_info">
				<text class="user_name" decode="true">{{datas.authorName}}</text>
				<view class="user_motto">
					{{datas.authorDescription}}
				</view>
			</view>
			<ReportAndFollow class="rf" :fromWitch=2 :mycomment="mycomment" v-if='isNav' :commentId="datas.postId" :fromSummary='true'></ReportAndFollow>
		</navigator>
		<view class="msg" @tap="navTo">
			<view>
				<rich-text v-if="fromSearch" :nodes="datas.body"></rich-text>
				<text v-if="!fromSearch">{{datas.body}}</text>
				<text class="ats" v-for="(item,index) in datas.ats" :key="index" @tap.stop="navToUser(item.id)">{{" @"+item.nickName}}</text>
			</view>
			<!-- 正文内容的图片 -->
			<view class="img-list">
				<!-- <image v-if="datas.mediaUrls !== null && datas.mediaUrls.length === 1" :src="datas.mediaUrls[0]" mode="widthFix"
				 class="img-single" @tap.stop="showImage(0)" /> -->
				 <image v-if="datas.mediaUrls !== null && datas.mediaUrls.length === 1" :src="datas.mediaUrls[0]" mode="widthFix"
				  class="img-single" @tap.stop="showImage(0)" />
				 
				<template v-if="datas.mediaUrls !== null && datas.mediaUrls.length > 1">
					<view class="item" v-for="(item, index) in datas.mediaUrls" :key="index" @tap.stop="showImage(index)">
						<image :src="item" mode="aspectFill" />
					</view>
				</template>
			</view>
		</view>

		<!-- 正文内容的标签 -->
		<view class="tag" v-show='!notags'>
			<text v-for="(item,index) in datas.tags" :key="index">{{"#"+item.name}}</text>
		</view>
		<!-- 分割线 -->
		<view class="line"></view>
		<!-- 日期、 点赞 留言 收藏 投币功能 -->
		<view class="activeBottom">
			<view class="activeLeft">
				<text class="date">{{postTime}}</text>
			</view>
			<view class="activeRight">
				<text :class="datas.liked? 'inxupt inxupttubiao5':'inxupt inxupttubiao4'" @tap="praise">
					<text class="activeNum">{{datas.likeNumText}}</text>
				</text>
				<text class="inxupt inxupttubiao6" @tap="navTo();solveReceive()">
					<text class="activeNum">{{commentNumText}}</text>
				</text>
				<text :class="datas.favorited? 'inxupt inxupttubiao8':'inxupt inxupttubiao7'" @tap="collect">
					<text class="activeNum">{{datas.favoriteNumText}}</text>
				</text>
				<text :class="datas.coined? 'inxupt inxupttubiao10':'inxupt inxupttubiao9'" @tap="reward">
					<text class="activeNum">{{datas.coinsNumText}}</text>
				</text>
			</view>
		</view>
	</view>

</template>

<script>
	import ReportAndFollow from "../ReportAndFollow.vue"
	import Level from "../Level.vue"
	import { _ajax } from '../../in-xupt-functions.js'

	export default {
		data() {
			return {
				postId: undefined,
				mycomment: false,
				imgFlag: false, //判断图片是一张还是多张
				navigateTo: false, //判断跳转
				commentTo: false,
				userId: undefined,
				notags: false,
				normalList: {}
			}
		},
		props: {
			datas: {
				type: Object,
				default: {}
			},
			isNav: Boolean,
			fromSearch: {
				type: Boolean,
				default: false
			}
		},
		onLoad: function(option) {
			if (option.postId) {
				this.postId = option.postId
			}
		},
		methods: {
			// 点赞收藏投币功能函数
			praise: function() {
				this.$on('postPraising',this.postId)
				var adr = '/post/' + this.normalList.postId + '/like';
				if (this.userId) {
					if (this.normalList.liked) {
						this.normalList.likeNum--;
					}else {
						this.normalList.likeNum++;
					}
					this.normalList.likeNumText = this.solveNumber(this.normalList.likeNum);
					this.normalList.liked = !this.normalList.liked;
				} else {
					uni.showToast({
						title: '点赞失败',
						icon: 'none',
						
					})
				}

				if (this.normalList.liked) {
					// 点赞之后发送AJAX数字postId
					_ajax({
						url: adr,
						method: 'POST',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '点赞成功'
						});
					})
				} else {
					// 点赞取消之后发送AJAX数字postId
					_ajax({
						url: adr,
						method: 'DELETE',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						});
					})
				}
			},
			collect: function() {
				var adr = '/post/' + this.normalList.postId + '/favorite';
				if (this.userId) {
					if (this.normalList.favorited) {
						this.normalList.favoriteNum--;
					}else {
						this.normalList.favoriteNum++;
					}
					this.normalList.favoriteNumText = this.solveNumber(this.normalList.favoriteNum);
					this.normalList.favorited = !this.normalList.favorited;
				} else {
					uni.showToast({
						title: '收藏失败',
						icon: 'none',
					})
				}
				if (this.normalList.favorited) {
					// 收藏之后发送AJAX数字postId
					_ajax({
						url: adr,
						method: 'POST',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						});
					})
				} else {
					// 取消收藏之后发送AJAX数字postId
					_ajax({
						url: adr,
						method: 'DELETE',
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						});
					})
				}
			},
			// 8.25 投币只能投一次
			reward: function() {
				var adr = '/post/' + this.normalList.postId + '/coin';
				if (!this.normalList.coined) {
					_ajax({
						url: adr,
						method: 'POST'
					}).then((res) => {
						if (res.data.status == 0) {
							this.normalList.coinsNum++;
							
							uni.showToast({
								icon: "none",
								title: "感谢投币！(p≧w≦q)"
							})
							this.normalList.coined = !this.normalList.coined;
							this.normalList.coinsNumText = this.solveNumber(this.normalList.coinsNum);
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					})
				}else {
					uni.showToast({
						icon: "none",
						title: "你已经投过币了哦~"
					})
				}
			},
			// 点击tag跳转
			tagTo() {
				uni.navigateTo({
					url: ''
				})
			},
			// at跳转至个人详情页 url参数为那个人的id
			atTo() {
				uni.navigateTo({
					url: ''
				})
			},
			navToUser(id){
				uni.navigateTo({
					url:"../OthersInformation/OthersInformation?userId="+id
				})
			},
			solveReceive: function() {
				// 向评论组件传递replyUserId
				uni.$emit("setCommentId", {
					fromPostings: true
				})
			},
			showImage(index) {
				var imgList = this.datas.mediaUrls;
				uni.previewImage({
					urls: imgList,
					current: index,
					longPressActions: {
						itemList: ['保存到相册'],
						success: data => {
							uni.downloadFile({
								url: imgList[data.index],
								success: function(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: () => {
											uni.showToast({
												title: '保存成功',
												icon: 'none'
											});
										}
									});
								}
							});
						}
					}
				});
			},
			navTo() {
				if (!this.isNav) {
					uni.navigateTo({
						url: "../Postings/Postings?postId=" + this.normalList.postId,
						fail(res) {
							uni.showToast({
								title: "页面跳转失败",
								icon: "none"
							})
						}
					})
				}
			},
			solveNumber: function(num) {
				if (num >= 10000) {
					return (num / 10000).toFixed(1) + 'w';
				} else if (num >= 1000) {
					return (num / 1000).toFixed(1) + 'k';
				} else {
					return num + '';
				}
			},
			// 获取时间
			getTime: function(time) {
				return [time.getFullYear(), time.getMonth() + 1, time.getDate(), time.getHours(), time.getMinutes()]
			},
			// 图片预览
			previewImg: function(logourl) {
				var that = this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				})
			},
		},
		components: {
			ReportAndFollow,
			Level,
		},
		computed: {
			commentNumText: function () {
				let number = this.normalList.commentNum
				if(number !== undefined) {
					if (number >= 10000) {
						return (number / 10000).toFixed(1) + 'w';
					} else if (number >= 1000) {
						return (number / 1000).toFixed(1) + 'k';
					} else {
						return number + '';
					}
				}else {
					return ''
				}
			},
			postTime: function() {
				if(!this.normalList.createTime) {
					return
				}else {
					// 得到当前时间
					let nowTime = new Date().getTime()
					// 得到评论发布时间
					let previousTime = new Date(this.normalList.createTime).getTime()
					// 生成年月日时分秒数组，方便循环计算
					let nowTimeList = this.getTime(new Date());
					let previousTimeList = this.getTime(new Date(this.normalList.createTime));
					
					// 小于24小时，显示**小时前/**分钟前
					// 超过24小时且不超过一年，显示**月**日
					// 超过一年，显示**年**月**日
					var deltaTime = nowTime - previousTime;
					
					// 小于一分钟
					if (deltaTime / 1000 < 60) {
						return '1分钟内'
					} else if (deltaTime / 1000 / 60 < 60) {
						// 一小时内显示××分钟前
						return (deltaTime / 1000 / 60).toFixed() + '分钟前'
					} else if (deltaTime / 1000 / 60 /60 < 24) {
						// 一天内显示××小时前
						return (deltaTime / 1000 / 60 / 60).toFixed() + '小时前'
					} else if (deltaTime / 1000 / 60 /60 / 24 < 7) {
						
						return (deltaTime / 1000 / 60 / 60 / 24).toFixed() + '天前'
					} else if (nowTimeList[0] == previousTimeList[0]) {
						// 大于一天且是本年发的 则显示××月××日
						return previousTimeList[1] + '-' + previousTimeList[2]
					} else {
						// 大于一天且是本年发的 则显示××××年××月××日
						return previousTimeList[0] + '-' + previousTimeList[1] + '-' + previousTimeList[2]
					}
				}
			}
		},
		watch: {
			normalList: function(nowList, prelist) {
				nowList.likeNumText = this.solveNumber(nowList.likeNum);
				nowList.coinsNumText = this.solveNumber(nowList.coinsNum);
				nowList.favoriteNumText = this.solveNumber(nowList.favoriteNum);
				if (nowList.authorId == this.userId) {
					this.mycomment = true
				}
				if (nowList.tags == null) {
					this.notags = true
				}
				return this.$props.datas
			}
		},

		mounted() {
			this.normalList = this.$props.datas
			this.userId = uni.getStorageSync('userId');
		}
	}
</script>

<style lang="less">
	/* // 消息框 */
	.normal-message {
		// padding-bottom: 10rpx;
		margin: 0 auto;
		width: 100%;
		height: 100%;
		background-color: white;
		margin-bottom: 14rpx;
		padding: 20rpx;
		box-sizing: border-box;
		/* 用户信息 */
		.userBar {
			position: relative;
			display: flex;
			margin-bottom: 20rpx;
			.user_head {
				vertical-align: top;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			.user_info {
				flex: 1;
				.user_name {
					font-size: 32rpx;
					padding-left: 16rpx;
				}
				.user_motto {
					margin-top: 10rpx;
					padding-left: 16rpx;
					font-size: 24rpx;
					color: #7f7f7f;
				}
			}
			.level {
				position: absolute;
				left: 4rpx;
				bottom: 0rpx;
			}

			.rf {
				position: absolute;
				top: 10rpx;
				right: 0;
			}
		}

		.msg {
			padding-right: 15rpx;
			margin-top: -10rpx;
			.ats{
				color: @g-blue;
			}
			.atClick {}
			
			.img-single {
				width: 300rpx;
				border-radius: 5px;
			}
			
			.img-list {
				width: 630rpx;
				display: flex;
				flex-wrap: wrap;
			}

			.img-list .item {
				width: 200rpx;
				height: 200rpx;
				margin: 5rpx;
				overflow: hidden;
				border-radius: 5px;
			}

			.img-list image {
				width: 200rpx;
				height: 200rpx;
			}
			text {
				font-size: 32rpx;
			}
		}

		/* // 消息框内容 */
		text {
			// letter-spacing:0.5px;
			font-size: 24rpx;
		}

		.at {
			color: #548ec2;
		}

		/* // 内容图片 */
		// image {
		// 	padding: 4rpx;
		// 	width: 200rpx;
		// 	height: 200rpx;

		// }

		.tag {
			width: 750rpx;
			height: 50rpx;

			/* //标签 */
			text {
				margin: 10rpx;
				color: #548ec2;
			}
		}

		/* //分割线 */
		.line {
			margin-top: 10rpx;
			background-color: #F2F2F2;
			width: 700rpx;
			height: 2rpx;
		}

		/* //点赞投币收藏功能 */
		// .activeBottom{
		// 	display: block;
		// 	float: right;

		// 	.inxupt{
		// 		padding-left: 10rpx;
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// 	.activeLeft {
		// 		float: left;
		// 		margin-left: -390rpx;
		// 		color: #7F7F7F;
		// 	}
		// 	.num{
		// 		color: #7F7F7F;
		// 	}
		// 	.inxupt,.num{
		// 		padding-right: 10rpx;
		// 	}
		// }
		// 新样式底部
		.activeBottom {
			width: 100%;
			height: 22%;
			font-size: 32rpx;
			color: #7f7f7f;
			display: flex;

			// background-color: #548EC2;
			.activeLeft {
				width: 500rpx;
				// text-align: center;
				line-height: 60rpx;
				font-size: 32rpx;

				// font-weight: bold;
				.date {

					font-size: 32rpx;
				}
			}

			.activeRight {
				white-space: pre-wrap;
				width: 80%;
				line-height: 60rpx;
				text-align: right;
				padding-right: 12rpx;

				.inxupt {
					margin-left: 32rpx;
					font-size: 32rpx;
				}

				.activeNum {
					font-size: 32rpx;
					margin-left: 10rpx;
					// font-weight: bold;
				}
			}
		}
	}
</style>
